<template>
    <div class="userInfo flex pt-s pl-s pb-xs">
        <div class="profile relative">
            <img src="../../../assets/user-circle.png" alt="" v-if="userData.profile.url === ''" style="width: 100%;">
            <div class="avatar" :style="{
                backgroundImage: `url(${userData.profile.url})`,
                backgroundSize: userData.profile.scale + 'px',
                backgroundPosition: `${userData.profile.pos.x}px ${userData.profile.pos.y}px`,
            }"></div>
            <div class="mask flex jc-center ai-center">更换</div>
            <input type="file" title="" @change="avatarChange" accept="image/*">
        </div>
        <div class="pl-s information pt-xxs">
            <h4 class="username fc-white fs-m">{{userData.username}}</h4>
            <div class="signature relative" @click.stop="signatureMousedown">
                <p class="relative" v-show="signatureSetting.originalShow">
                    {{userData.signature}}
                </p>
                <div class="mask flex ai-center" v-show="signatureSetting.originalShow">
                    点击修改
                </div>
                <label>
                    <input type="text"
                           v-show="signatureSetting.inputShow"
                           v-model="signatureSetting.text"
                           @keyup="signaturePost"
                           ref="signatureSet"
                    />
                </label>
            </div>
        </div>
        <div class="more relative f1 flex jc-center ai-center" @click.stop>
            <i class="iconfont icon-bars" @click="blogShow = !blogShow"></i>
            <div class="box" v-show="blogShow">
                <p @click="$router.push(`/blog/${userData._id}`)">个人博客</p>
            </div>
        </div>
        <cut-profile ref="profileSet" @post-avatar="postAvatar"></cut-profile>
    </div>
</template>

<script>
    export default {
        name: "userEdit",
        data() {
            return {
                signatureSetting: {
                    originalShow: true,
                    inputShow: false,
                    text: '',
                },

                blogShow: false,
            }
        },
        computed: {
            userData() {
                return this.$store.state.userData;
            },

            socket() {
                return this.$store.state.socket;
            }
        },
        methods: {
            signatureMousedown() {
                this.signatureSetting.text = this.userData.signature || '';
                this.signatureSetting.originalShow = false;
                this.signatureSetting.inputShow = true;
                this.$nextTick(() => {
                    this.$refs.signatureSet.focus()
                });
            },

            async signaturePost(e) {
                if (e.key === 'Enter') {
                    await this.$http.post('/main/setSignature', {
                        text: this.signatureSetting.text
                    })
                    this.userData.signature = this.signatureSetting.text;
                    this.$refs.signatureSet.blur();
                    this.signatureSetting.originalShow = true;
                    this.signatureSetting.inputShow = false;
                }
            },

            async avatarChange(e) {
                let file = e.target.files[0];
                e.target.value = '';
                this.$refs.profileSet.show(file);
            },

            postAvatar(data) {
                this.$socket.emit('avatarChange', data);
            },
        },
        mounted() {
            let that = this;
            window.addEventListener('click', function () {
                that.signatureSetting.originalShow = true;
                that.signatureSetting.inputShow = false;
                that.blogShow = false;
            })
        }
    }
</script>

<style scoped lang="scss">
    .userInfo {
        flex-shrink: 0;
    }

    .profile {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        flex-shrink: 0;

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-repeat: no-repeat;
        }

        input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 0;
            opacity: 0;
            cursor: pointer;
        }

        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, .3);
            opacity: 0;
            color: white;
        }

        &:hover {
            .mask {
                opacity: 1;
            }
        }
    }

    .username {
        margin-bottom: 5px;
    }

    .signature {
        width: 200px;
        height: 20px;
        overflow: hidden;
        cursor: pointer;

        p {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mask {
            padding: 0 5px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .2);
            opacity: 0;
            user-select: none;
        }

        input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
            outline-style: none;
            background-color: transparent;
            color: #999;
            cursor: pointer;
        }

        &:hover {
            p {
                opacity: 0.2;
            }

            .mask {
                opacity: 1;
            }
        }
    }

    .more {
        user-select: none;

        .iconfont {
            cursor: pointer;
        }

        .box {
            position: absolute;
            top: 40px;
            right: 5px;
            width: 100px;
            height: 30px;
            border-radius: 2px;
            background: #999;
            z-index: 510;

            p {
                font-size: 14px;
                line-height: 30px;
                text-align: center;
                color: white;
                cursor: pointer;
            }
        }
    }
</style>